Bootstrap 5 is in alpha when this is written and it’s subject to change.
Bootstrap is a popular UI library for any JavaScript apps.
In this article, we’ll look at how to add dropdowns with Bootstrap 5.
Dropdowns
Dropdowns are toggleable overlays for display lists of items.
The Bootstrap 5 implementation depends on Popper.js.
For example, we can write:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">foo</a></li>
<li><a class="dropdown-item" href="#">bar</a></li>
<li><a class="dropdown-item" href="#">baz</a></li>
</ul>
</div>
We have the div with the dropdown class.
The button lets us toggle the dropdown on and off.
The data-toggle attribute is also needed to make the button a toggle.
It has the dropdown-toggle class to add the toggle.
Then we add the ul with the dropdown-menu class to add the list.
The list items have the dropdown-item class.
The button can be replaced with an a element.
For example, we can write:
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" data-toggle="dropdown">
Dropdown link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">foo</a></li>
<li><a class="dropdown-item" href="#">bar</a></li>
<li><a class="dropdown-item" href="#">baz</a></li>
</ul>
</div>
We have an a element instead with the dropdown-toggle class instead of a button.
Also, we can change the button variant.
For example, we can write:
<div class="dropdown">
<a class="btn btn-danger dropdown-toggle" href="#" data-toggle="dropdown">
Dropdown link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">foo</a></li>
<li><a class="dropdown-item" href="#">bar</a></li>
<li><a class="dropdown-item" href="#">baz</a></li>
</ul>
</div>
to change the class of the button to .btn-danger .
Split Button
The dropdown button can be a split button.
To add it, we add 2 buttons:
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">foo</a></li>
<li><a class="dropdown-item" href="#">bar</a></li>
<li><a class="dropdown-item" href="#">baz</a></li>
</ul>
</div>
We have the .btn-group class instead of the dropdown class in the outer div.
Inside the div, we have 2 buttons.
One with the text and one with the arrow.
It has the dropdown-toggle class and the data-toggle attribute so that we can toggle the menu with it.
Also, we have the dropdown-toggle-split to make the button align with the left button.
Sizing
The size of the button dropdown button can be changed.
For example, we can use the btn-lg class to make it large:
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Large button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">foo</a></li>
<li><a class="dropdown-item" href="#">bar</a></li>
<li><a class="dropdown-item" href="#">baz</a></li>
</ul>
</div>
We can also add the btn-sm class to make it small:
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Large button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">foo</a></li>
<li><a class="dropdown-item" href="#">bar</a></li>
<li><a class="dropdown-item" href="#">baz</a></li>
</ul>
</div>
Directions
The direction of the dropdown can be changed.
We can make it display above the button.
For example, we can use the .dropup class to do that by writing:
<div class="btn-group dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
Large button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">foo</a></li>
<li><a class="dropdown-item" href="#">bar</a></li>
<li><a class="dropdown-item" href="#">baz</a></li>
</ul>
</div>
It also works with split buttons:
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">
Split dropup
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">foo</a></li>
<li><a class="dropdown-item" href="#">bar</a></li>
<li><a class="dropdown-item" href="#">baz</a></li>
</ul>
</div>
Dropright
We can add the .dropright class to make the menu display on the right.
For example, we can write:
<div class="btn-group dropright">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">foo</a></li>
<li><a class="dropdown-item" href="#">bar</a></li>
<li><a class="dropdown-item" href="#">baz</a></li>
</ul>
</div>
to make the right arrow display beside the text and show the menu on the right.
For a split button, we can write:
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary">
Split
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">foo</a></li>
<li><a class="dropdown-item" href="#">bar</a></li>
<li><a class="dropdown-item" href="#">baz</a></li>
</ul>
</div>
to do the same thing with a split button.
Conclusion
We can add a dropdown easily with Bootstrap 5.
It comes with various customization options.
